<template>
	<el-dialog v-model="dialogVisible" append-to-body :show-close="false" :close-on-click-modal="false"
		class="flex-align" style="width: 100%;height: 100%;padding: 30px 24px;margin: 0;background: transparent;">
		<template #header>
			<el-card style="width: 100%;height: 100%;" body-style="padding: 0;" shadow="never">
				<template #header>
					<div class="flex-space-between">
						<div>
							<el-text style="font-size: 16px;">
								库存表
							</el-text>
						</div>
						<div>
							<el-button @click="closeDialog">取消</el-button>
							<el-button @click="closeDialog">
								保存并继续创建
								<el-icon style="margin-left: 4px;">
									<ArrowDown />
								</el-icon>
							</el-button>
							<el-button type="primary" @click="closeDialog">
								保存
							</el-button>
						</div>
					</div>
				</template>
				<el-scrollbar :style="`height: calc(100vh - 69px - ( 30px + 30px));`">
					<el-form model ref="vForm" rules label-position="top" label-width="50px" style="padding: 16px;">
						<!--  -->
						<div class="static-content-item">
							<div>商品信息</div>
						</div>
						<el-form-item label="商品编码" prop="">
							<el-input type="text" clearable></el-input>
						</el-form-item>
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="商品名称" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="规格型号" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<!--  -->
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="商品分类" prop="">
									<el-input readonly type="text" clearable>
										<template #prefix>
											<div>
												<el-check-tag
													:style="`color: ${segmentedIndex1===key?'#fff':''};${segmentedIndex1===key?`background: ${item.bg}`:''}`"
													v-for="(item,key) in segmentedList1" :key="key"
													:checked="segmentedIndex1===key"
													@change="tagChange1(key)">{{item.text}}</el-check-tag>
											</div>
										</template>
									</el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="商品分类" prop="">
									<el-input readonly type="text" clearable>
										<template #prefix>
											<div>
												<el-check-tag
													:style="`color: ${segmentedIndex2===key?'#fff':''};${segmentedIndex2===key?`background: ${item.bg}`:''}`"
													v-for="(item,key) in segmentedList2" :key="key"
													:checked="segmentedIndex2===key"
													@change="tagChange2(key)">{{item.text}}</el-check-tag>
											</div>
										</template>
									</el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<!--  -->
						<el-form-item label="产品图片" prop="">
							<el-input readonly clearable>
								<template #prefix>
									<el-button text :icon="UploadFilled">
										上传图片
									</el-button>
								</template>
							</el-input>
						</el-form-item>
						<!--  -->
						<div class="static-content-item">
							<div>商品参考价格</div>
						</div>
						<!--  -->
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="成本单价" prop="">
									<el-input type="text" clearable>
										<template #suffix>
											<el-text type="info">元</el-text>
										</template>
									</el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="销售单价" prop="">
									<el-input type="text" clearable>
										<template #suffix>
											<el-text type="info">元</el-text>
										</template>
									</el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<!--  -->
						<div class="static-content-item">
							<div>库存信息</div>
						</div>
						<!--  -->
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="当前库存数量" prop="" class="form-item-bg">
									<el-input type="text" readonly placeholder="保存后显示计算结果" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="采购在途数量" prop="" class="form-item-bg">
									<el-input type="text" readonly placeholder="保存后显示计算结果" clearable></el-input>
								</el-form-item>
								<!--  -->
							</el-col>
						</el-row>
						<el-row :gutter="16">
							<el-col :span="12">
								<!--  -->
								<el-form-item label="期初库存数量" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<!--  -->
								<el-form-item label="库存下限" prop="">
									<el-input type="text" clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<!--  -->
					</el-form>
				</el-scrollbar>
				<!--  -->
			</el-card>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
	import { ref } from 'vue';
	import { UploadFilled,ArrowDown } from '@element-plus/icons-vue';
	const segmentedList1 = ref([{
		text: '天幕',
		bg: '#3d97f2',
		value: 1
	}, {
		text: '座椅',
		bg: '#2fba2f',
		value: 2
	}, {
		text: '桌子',
		bg: '#f25555',
		value: 3
	}, {
		text: '其他',
		bg: '#86a3bf',
		value: 4
	}]);
	const segmentedList2 = ref([{
		text: '箱',
		bg: '#3d97f2',
		value: 1
	}, {
		text: '盒',
		bg: '#2fba2f',
		value: 2
	}, {
		text: '套',
		bg: '#f25555',
		value: 3
	}, {
		text: '件',
		bg: '#86a3bf',
		value: 4
	}, {
		text: '台',
		bg: '#36d8a2',
		value: 5
	}, {
		text: '件',
		bg: '#f46997',
		value: 6
	}]);
	const segmentedIndex1 = ref(0);
	const segmentedIndex2 = ref(1);
	//
	const tagChange1 = (key : number) => {
		if (key === segmentedIndex1.value) {
			segmentedIndex1.value = -1;
		}
		segmentedIndex1.value = key;
	}
	const tagChange2 = (key : number) => {
		if (key === segmentedIndex2.value) {
			segmentedIndex2.value = -1;
		}
		segmentedIndex2.value = key;
	}
	//
	const dialogVisible = ref(false);
	/**
	 * 打开弹出层
	 */
	const openDialog = (item : any) => {
		dialogVisible.value = true;
	}
	/**
	 * 关闭弹出层
	 */
	const closeDialog = (item : any) => {
		dialogVisible.value = false;
	}
	//暴露属性和方法给外部使用
	defineExpose({
		openDialog
	})
</script>
<style>
	@import '../../../assets/css/my-form-item.css';

	.form-item-bg {
		background-color: #bfdfff;
	}

	.form-item-bg1 {
		background-color: #a5f2e5;
	}
</style>

<style scoped lang="scss">
	@import '../../../assets/css/index.scss';
</style>